<template>
  <div class="personalCenter_container main_container">
    <div class="container">
      <div class="left">
        <div class="head_info">
          <img :src="userInfo.avatar" alt="">
          <div class="name">{{ userInfo.userName }}</div>
        </div>
        <div v-for="(item,index) in slideBarList" :key="index" class="slide_bar">
          <div class="bar_name">{{ item.name }}</div>
          <div v-for="(item2,index2) in item.list" :key="index2" :class="[currentBarIndex==index&&currentTabIndex==index2?'activeClass':'']" class="barName" @click="clickTab(index,index2,item2.tabName)">
            <div :style="{background:currentBarIndex==index&&currentTabIndex==index2?'blue':''}" style="width: 3px; height: 20px;" />
            <svg-icon :icon-class="item2.icon" />
            <div>{{ item2.tabName }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <PersonalInfo v-if="tabName=='个人信息'" />
        <PersonalAccount v-if="tabName=='极分中心'" />
      </div>
    </div>
  </div>

</template>

<script>
// import AvatarUpload from './components/AvatarUpload'
// import ChangePassword from './components/ChangePassword'
import PersonalAccount from './components/personalCenter/PersonalAccount'
import PersonalInfo from './components/personalCenter/PersonalInfo'
export default {
  name: 'PersonalCenter',
  components: {
    PersonalInfo, PersonalAccount
  },
  data() {
    return {
      userInfo: {},
      currentBarIndex: 0,
      currentTabIndex: 0,
      tabName: '个人信息',
      slideBarList: [
        {
          name: '账户',
          list: [
            { tabName: '个人信息', icon: '删除' }
          ]
        },
        {
          name: '极分',
          list: [
            { tabName: '极分中心', icon: '批量操作' }
          ]
        }
      ]
    }
  },
  mounted() {
    this.userInfo = this.$store.state.user
  },
  methods: {
    clickTab(index, index2, tabName) {
      this.currentBarIndex = index
      this.currentTabIndex = index2
      this.tabName = tabName
    }
  }
}
</script>

<style lang="less" scoped>
.personalCenter_container{
  width: 100%;
  height: 100%;
  padding: 10px;
  .container{
    height: 100%;
    width: 100%;
    background-color: white;
    border-radius: 8px;
    display: flex;
    .left{
      width: 20%;
      height: 100%;
      border-right: 1px solid rgb(240,240,240);
      padding:20px 10px;
      .head_info{
        display: flex;
        align-items: center;
        // margin: 10px 0;
        img{
          height: 50px;
          width: 50px;
          border-radius:50% ;
          margin: 0 10px;
        }
        .name{
          font-size: 24px;
          font-weight: 600;
        }
      }
      .slide_bar{
        margin-top: 20px;
        .bar_name{
          color: #999;
          padding-left: 10px;
          margin-bottom: 5px;
        }
        .barName{
          cursor: pointer;
          display: flex;
          align-items: center;
          padding:10px 0;

          .svg-icon{
            margin-left: 20px;
            margin-right: 10px;
          }
        }
      }
    }
    .right{
      width: 80%;
    }
  }
}
.activeClass{
  background-color: rgb(242, 243, 243);
  border-radius: 8px;
  font-weight: bold;
}
.activeClass2{
  border-left: 1px solid blue;
}
</style>

